/* 引入字体文件 */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
/* 添加全局样式 */
* {
  box-sizing: border-box;
}
body {
  font-family:'Muli', sans-serif;
  /* 直接全局flex布局 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 指定body的高度 */
  height: 100vh;
  overflow: hidden;
  /* 重置margin */
  margin: 0
}
/* 添加完以上样式后，我的页面并没有啥子改变，但是这是个好习惯需要意识到 */

.container {
  width: 90vw;
  display: flex;
  /* 下面注释掉的样式是我最初写的，注释掉之后页面也并不受影响，因为给body指定了flex布局，container的display表明自己也遵守吧 */
  /* padding: 5vw;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center; */
}

.card {
  /* 设置弹性项目中如何增大和缩小以适应弹性容器中可用的空间 单值设定相当于flex：0.5 1 0； */
  flex: 0.5;
  margin: 10px;
  height: 70vh;
  border-radius: 50px;
  position: relative;
  /* 字体颜色尽量在容器中设置，不要针对某一个标签 */
  color: #fff;
  /* 给可点击的地方指定小手的标志，向用户表明它是可点击的，这应该是一个约定俗称约定 */
  cursor: pointer;
  /* 添加对背景图片的设置 */
  /* 设置背景图片的大小，cover：保持图片的宽高比例，覆盖背景区的大小 */
  background-size: cover;
  /* 北京图片居中表示，应该是容器缩小的时候，显示中间部分吧 */
  background-position: center;
  /* 当背景小于背景区的大小时，要不要重复填满，但是有个疑问，我们在上面指定了背景区是覆盖的样式，还需要这个值吗 ,应该是由必要的，当容器的宽高比和图片不一致时，容器剩余部分的背景应该就会重复了*/
  background-repeat: no-repeat;
  /* -webkit-transition：我没有找到该属性的定义，但是目的应该就是指定一个过渡效果
  all:代表以上所有属性的一个转换，
  ease-in: 以慢速开始的过渡效果 */
  -webkit-transition: all 700ms ease-in;
}
.card.active {
  /* 我刚开始通过宽度来控制，但是当屏幕大小大于我设置的宽度时，看不出来效果，所以控制动态属性最后保持一致 */
  /* width: 30vw; */
  flex: 5;
}

.card h3 {
  /* color: #fff; */
  position: absolute;
  bottom: 20px;
  left: 20px;
  /* 重置h3的一些默认属性 */
  font-size: 24px;
  margin: 0;
  opacity: 0;
  /* 这里不指定过渡效果 */
  /* transition: opacity 0.6s linear; */
}
.card.active h3 {
  opacity: 1;
  /* 在这里指定过渡效果
    哇哇哇！这里的这个效果的逻辑好棒啊，
    整个过渡时间为0.3s+0.4s=容器的过渡时间0.7s;
    因为标题是在容器展开的过程中延迟显示的
   */
  transition: opacity 0.3s ease-in 0.4s;
}

/* 源码在最后加了个媒体查询，正好练习一下 */
/* 当屏幕宽度小于480px时 */
@media (max-width: 480px) {
  /* 容器的宽度变成百分百 */
  .container {
    width: 100vw;
  }
  /* 卡片只显示三个
  :nth-of-type 伪类表示在.card的兄弟元素中的第四个和第五个的样式
   */
  .card:nth-of-type(4),
  .card:nth-of-type(5) {
    display: none;
  }
}
